<template>
	<div class="view">
		<serachInput @search="search" :value="keyword" keyHistory="searchDiseaseHistory"></serachInput>
		<!-- 疾病列表 -->
		<div class="disease-list" v-if="list.length > 0">
			<div class="list" v-for="(item, index) in list" :key="index"
				@click="to('/pages/other/result/glossary?id=' + item.detailsDiseaseId)">
				<view class="name">{{item.detailsDiseaseName}}</view>
				<image class="go" src="/static/images/ic_next.png"></image>
			</div>
		</div>
		<template v-else>
			<div class="searchList">
				<div class="title">
					<span>热门搜索</span>
				</div>
				<div class="Info" v-if="hotList.length > 0">
					<p @click="search(item)" v-for="(item, index) in hotList" :key="index">
						{{ item }}
					</p>
				</div>
			</div>
			<div v-if="historyList.length > 0" class="searchList">
				<div class="title">
					<span>历史搜索</span>
					<img @click="deleteBatch()" src="/static/images/ic_delete.png" alt="" />
				</div>
				<div class="Info" v-if="historyList.length > 0">
					<p @click="search(item)" v-for="(item, index) in historyList" :key="index">
						{{ item }}
					</p>
				</div>
			</div>
		</template>
	</div>
</template>

<script>
	import serachInput from "components/searchInput.vue";
	import {
		getKeywordByType
	} from "apis/request.js";

	export default {
		components: {
			serachInput
		},
		data() {
			return {
				userId: '',
				keyword: '',
				hotList: [],
				historyList: [],
				page: 1,
				total: 0,
				list: []
			};
		},
		methods: {
			async getHot() {
				this.hotList = await getKeywordByType({
					type: 1
				});
			},
			deleteBatch() {
				uni.removeStorageSync('searchDiseaseHistory')
				setTimeout(() => {
					this.historyList = []
					uni.showToast({
						title: '删除成功'
					})
				}, 100)
			},
			to(url) {
				uni.navigateTo({
					url
				});
			},
			search(e) {
				this.keyword = e
				this.page = 1
				this.list = []
				this.getList()
			},
			getList() {
				this.$api.http('/hospital/disease/glossary/api/n/list', 'GET', {
					diseaseName: this.keyword,
					pageNo: this.page,
					pageSize: 10
				}, res => {
					this.total = res.data.result.total
					let list = res.data.result.records
					this.list = this.list.concat(list)
					if (this.list.length < this.total) {
						this.page++
					}
				})
			}
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.getList()
			}
		},
		created() {
			this.userId = uni.getStorageSync("userInfo").id || null
			Object.assign(this.$data, this.$options.data())
			this.historyList = uni.getStorageSync('searchDiseaseHistory')
			this.getHot()
		}
	};
</script>

<style lang="scss" scoped>
	.view {
		background-color: #FFF;

		.searchList {
			padding: 30rpx 30rpx 0;

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;

				span {
					font-size: 30rpx;
					color: #333333;
				}

				img {
					width: 25.5rpx;
					height: 30rpx;
				}
			}

			.Info {
				display: flex;
				flex-wrap: wrap;
				margin-top: 40rpx;

				p {
					height: 68rpx;
					background: #f1efef;
					border-radius: 34rpx;
					padding: 0rpx 35rpx;
					line-height: 68rpx;
					margin-right: 15rpx;
					color: #333333;
					font-size: 26rpx;
					margin-bottom: 15rpx;
				}
			}
		}

		.disease-list {
			padding: 0rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			background-color: #FFF;

			.list {
				padding: 20rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				align-content: center;
				border-bottom: 1upx solid #f2f2f2;

				.img {
					width: 80rpx;
					height: 80rpx;
				}

				.name {
					flex: 1;
					padding-left: 20upx;
					font-size: 28rpx;
				}

				.go {
					margin-left: 10rpx;
					width: 20rpx;
					height: 35rpx;
				}
			}
		}

		.title-box {
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			align-content: center;
			background-color: #FFF;

			.img {
				width: 30rpx;
				height: 30rpx;
			}

			.title {
				margin-left: 15rpx;
				font-size: 26rpx;
			}
		}

		.warning {
			width: 100%;
			padding: 20rpx 30rpx;
			background: #f9edda;
			font-size: 26rpx;

			text:nth-child(1) {
				color: #DD1D1A;
			}

			text:nth-child(2) {
				color: #e6b664;
			}
		}
	}
</style>
